<template>
<!--  <el-card style="height:780px">-->
<!--    <div class="mainapp">-->
<!--      <div >-->
<!--        <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--          <el-row :gutter="15">-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="主题">-->
<!--                <el-select disabled v-model="lihne.user" placeholder="主题名称">-->
<!--                  <el-option selected label="三重一大" value="三重一大"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="任务类别">-->
<!--                <el-select disabled v-model="lihne.test" placeholder="主题名称">-->
<!--                  <el-option label="正式" value="1"></el-option>-->
<!--                  <el-option label="测试" value="2"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--              <el-form-item label="月份">-->
<!--                <el-date-picker-->
<!--                  disabled-->
<!--                  v-model="lihne.month"-->
<!--                  value-format="yyyy-MM"-->
<!--                  type="month"-->
<!--                  placeholder="选择月">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            &lt;!&ndash;          <el-col :span="6">&ndash;&gt;-->
<!--            &lt;!&ndash;            <el-form-item>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-button :disabled="!formInline.month" type="primary" @click="searchBtn">查询</el-button>&ndash;&gt;-->
<!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--            &lt;!&ndash;          </el-col>&ndash;&gt;-->
<!--          </el-row>-->




<!--          &lt;!&ndash;            <el-form-item>&ndash;&gt;-->
<!--          &lt;!&ndash;              <el-button type="primary" @click="onSubmit">上报</el-button>&ndash;&gt;-->
<!--          &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--        </el-form>-->
<!--        <div style="margin-bottom: 20px">-->
<!--          <el-card style="background: rgba(233,255,22,0.2);">-->
<!--            <svg-icon icon-class="yasuobao" className="svgStyle"></svg-icon>-->
<!--            {{zip}}-->
<!--          </el-card>-->
<!--        </div>-->
<!--        <div>-->
<!--          <el-table-->
<!--            :data="tableData"-->
<!--            height="470px"-->
<!--            style="width: 100%">-->
<!--            <el-table-column-->
<!--              prop="id"-->
<!--              label="ID"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="corpCd"-->
<!--              label="CORP_CD"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="infoResId"-->
<!--              label="INFO_RES_ID">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="indxId"-->
<!--              label="INDX_ID">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="indxNm"-->
<!--              label="INDX_NM">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="dataContt"-->
<!--              label="DATA_CONTT">-->
<!--            </el-table-column>-->
<!--            &lt;!&ndash;          <el-table-column&ndash;&gt;-->
<!--            &lt;!&ndash;            prop="nonstructContt"&ndash;&gt;-->
<!--            &lt;!&ndash;            label="NONSTRUCT_CONTT">&ndash;&gt;-->
<!--            &lt;!&ndash;          </el-table-column>&ndash;&gt;-->
<!--            <el-table-column-->
<!--              prop="linFlag"-->
<!--              label="LIN_FLAG">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--          <div style="margin: 10px auto 0">-->
<!--            <pagination-->
<!--              v-show="total > 0"-->
<!--              :total="total"-->
<!--              :page.sync="queryParams.page"-->
<!--              :limit.sync="queryParams.pageSize"-->
<!--              @pagination="getstep"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </el-card>-->

  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box">
        <el-form>
                      <el-col :span="5">
                        <el-form-item label="主题">
                          <el-select disabled v-model="lihne.user" placeholder="主题名称">
                            <el-option selected label="三重一大" value="三重一大"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="5">
                        <el-form-item label="任务类别">
                          <el-select disabled v-model="lihne.test" placeholder="主题名称">
                            <el-option label="正式" value="1"></el-option>
                            <el-option label="测试" value="2"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="5">
                        <el-form-item label="月份">
                          <el-date-picker
                            disabled
                            v-model="lihne.month"
                            value-format="yyyy-MM"
                            type="month"
                            placeholder="选择月">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
                    <el-table
                      :data="tableData"
                      :row-style="{height:'56px'}"
                      style="width: 100%">
                      <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="corpCd"
                        label="CORP_CD"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="infoResId"
                        label="INFO_RES_ID">
                      </el-table-column>
                      <el-table-column
                        prop="indxId"
                        label="INDX_ID">
                      </el-table-column>
                      <el-table-column
                        prop="indxNm"
                        label="INDX_NM">
                      </el-table-column>
                      <el-table-column
                        prop="dataContt"
                        label="DATA_CONTT">
                      </el-table-column>
                      <!--          <el-table-column-->
                      <!--            prop="nonstructContt"-->
                      <!--            label="NONSTRUCT_CONTT">-->
                      <!--          </el-table-column>-->
                      <el-table-column
                        prop="linFlag"
                        label="LIN_FLAG">
                      </el-table-column>
                    </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[12, 20, 30, 40]"
            class="pagination-container"
          />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
    import {getstepList,getstepTreatingList} from "@/api/escalation";
    export default {
        name: "stepTwo",
        props:['zip','lihne','list','total','user'],
        data(){
            return{
                formInline:{
                    user:'',
                },
                queryParams:{
                    page:1,
                    pageSize:10,
                    date:'',
                    type:'',
                },
                tableData: [],
            }
        },
        methods:{
            getstep(){
                this.queryParams.date= this.lihne.month;
                this.queryParams.type = this.lihne.test;
                getstepList(this.queryParams).then((response) => {
                    this.tableData = response.data;
                    this.total = response.total;
                });
            },
        },
        mounted() {
            this.getstep();
        }
    }
</script>

<style scoped lang="scss">
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 170px);
    background: #f7f9fb;
  .JNPF-common-layout-center {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  /*padding: 20px;*/

  .JNPF-common-search-box {
    background: #fff;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /*margin-bottom: 16px;*/
    padding: 15px 21px 0;
    border-radius: 4px;
  }
  .JNPF-flex-main{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
  }
  .JNPF-common-layout-main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
  }
  .JNPF-flex-main .el-table {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  }
  }
  .tableContainer {
    -webkit-box-flex: .9;
    -ms-flex: .9 0 0px;
    flex: .9 0 0;
    height: 100%;
    overflow: hidden;
    padding:0px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
  ::v-deep .el-form-item .el-input{
    width:241px;
  }
  ::v-deep .el-table__fixed{
    height:100% !important;
  }
 .svgStyle{
   font-size: 40px;
   vertical-align: middle;
   margin-right: 40px;
 }
</style>
